
<% var html={ %>

<div class='row zq-row'>
    <div class="report-query">
        <div class="layui-form">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">时间范围</label>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" id="dateChoose" placeholder="日期选择">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="main" ></div>
</div>
<% }; %>

<% var js={ %>
<script type='text/javascript' src='/plugin/echarts.min.js'></script>

<script>
    var myChart;
    var option;
    layui.use(['form','layer','laydate'], function(){
        var form = layui.form;
        var laydate = layui.laydate;
        //日期范围
        laydate.render({
            elem: '#dateChoose',
            max:-1
            ,range: true,
            change: function(value, date, endDate){
                init(value.split(" - ")[0],value.split(" - ")[1]);
            }
        });
    });
    $(function () {
        init("","");
    });
    function init(s,e) {
        var height = $(window).height()/2;
        var width = $("#main").parent().width();
        $("#main").css("height", height + "px").css("width", width + "px");
         myChart = echarts.init(document.getElementById('main'));
        zqPost("/console/report/gt06/area/json",{startDate:s,endDate:e},function (data) {
             option = {
                backgroundColor: "#404A59",
                color: data.data.colors,

                title: [{
                    text: '工作面积',
                    textStyle: {
                        color: '#fff'
                    }
                }],
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    x: 300,
                    top: '7%',
                    textStyle: {
                        color: '#ffd285',
                    },
                    data: data.data.names
                },
                grid: {
                    containLabel: true
                },
                toolbox: {
                    "show": false,
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    "axisLine": {
                        lineStyle: {
                            color: '#FF4500'
                        }
                    },
                    "axisTick": {
                        "show": false
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    boundaryGap: false,
                    data: data.data.time
                },
                yAxis: {
                    name: '单位:亩',
                    "axisLine": {
                        lineStyle: {
                            color: '#fff'
                        }
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#fff'
                        }
                    },
                    "axisTick": {
                        "show": false
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    type: 'value'
                },
                series: data.data.area
            }
            myChart.setOption(option);
        })
    };

</script>
<% }; %>

<% layout("/view/console/skins/skin_2/layout.html", {js:js,html:html}) {} %>